<template>
    <div class="messagelist">
        <!-- succ -->
        <div class="content">
            <div class="box" @click="changeTel">
                <div class="box-text">客服电话</div>
                <div class="box-num">{{mobile}}</div>
            </div>
            <div class="box" @click="changeAgreement">
                <div class="box-text">用户协议</div>
                <div class="box-icon"><img src="http://img.xuannang.net/jiantou@2x.png" alt=""></div>
            </div>
        </div>
        <!-- 新增按钮 -->
        <div class="bottom">
            <div>Copyright©2010-2019</div>
            <div>帮瓜视频版权所有</div>
        </div>
    </div>
</template>

<script>
import { Toast ,Dialog} from 'vant';
import { getMobile } from '@/api/public';
export default {
    name:'addSubSucc',
    components:{
        [Toast.name]:Toast,
    },
    data(){
        return {
            mobile:'',//客服电话
        }
    },
    created(){
        this.getMobile();//获取客服电话
    },
    methods:{
        getMobile(){
            getMobile().then(res => {
                if(res.code == 200){
                    this.mobile = res.data;
                }else {
                    Toast(res.msg);
                }
            })
        },
        // 跳转用户协议
        changeAgreement(){
            let para = {};
            para.title = "用户协议";
            para.url = "/service";
            this.interaction.hLink(para);
        },
        //打电话
        changeTel(){
            let para = {};
            para.phoneNumber = this.mobile;
            this.interaction.hPhone(para);
        },
    }
    
}

</script>

<style lang="stylus" scoped>
 .messagelist{
    width :100%;
    min-height :100%;
    background :#f1f1f1;
    overflow :hidden;
    .content{
        .box {
            width:100%;
            background:#ffffff;
            height :1.2rem;
            line-height :1.2rem;
            display :inline-block;
            border-bottom :.026667rem solid #f1f1f1;
            .box-text {
                float:left;
                font-size :.373333rem;
                color :#494949;
                margin-left :.266667rem;
            }
            .box-num {
                float:right;
                font-size :.373333rem;
                color:#1c90ff;
                margin-right :.266667rem;
            }
            .box-icon {
                float :right;
                margin-right :.266667rem;
                width:.16rem;
                height:.32rem;
                img {
                    width:100%;
                    height:100%;
                }
            }
        }
       
    }
    .bottom {
        width:100%;
        font-size :.346667rem;
        color:#a2a2a2;
        position:fixed;
        bottom :.8rem;
        text-align :center;
        line-height :.533333rem;
    }
    .no-data{
        padding-top :.8rem;
        text-align :center;
        color :#999;
        font-size :.346667rem;
    }
    .btn{
        height:1.2rem;
        line-height :1.2rem;
        position :fixed;
        width:86%;
        margin-left  :-43%;
        left :50%;
        bottom:.666667rem;
        background:#ffffff;
        border:1px solid #1c90ff;
        border-radius:5px;
      
        font-family:PingFangSC-Medium;
        font-size:.373333rem;
        color:#1c90ff;
        letter-spacing:.005067rem;
        text-align:center;
    }
}    
</style>